<template>
  <el-row :gutter="0" class="good-info-container">
    <el-col :span="5" class="container-left">
      <div class="good-info-title">{{ $props.goodInfo.title }}</div>
      <div class="good-info-entry" v-if="$props.goodInfo.entry">
        <a :href="goodInfo.entry?.targetUrl">
          <img
            class="good-info-image"
            :src="goodInfo.entry?.image"
            loading="lazy"
          />
        </a>
      </div>
      <div
        class="good-info-entries"
        v-if="($props.goodInfo.entries as Array<EntryListType>)?.length > 0"
      >
        <a
          :href="entry.targetUrl"
          v-for="entry of $props.goodInfo.entries"
          :key="entry.id"
        >
          <img
            class="good-info-entries-image"
            :src="entry.image"
            loading="lazy"
          />
        </a>
      </div>
    </el-col>
    <el-col :span="19" class="container-right">
      <ul class="tablist">
        <li
          class="tablist-item"
          v-for="tab of goodInfo.tabList"
          :key="tab.id"
          :class="{ 'tablist-item-active': activeTab === tab.tabName }"
        >
          <span
            class="tablist-item-name"
            @mouseenter="
              handleMouseEnter(tab.tabName);
              $event.stopPropagation();
            "
            @mouseleave="
              handleMouseLeave();
              $event.stopPropagation();
            "
            >{{ tab.tabName }}</span
          >
          <ul class="children-list clearfix">
            <a
              v-for="child of children"
              :key="child.id"
              :href="
                'https://www.mi.com/shop/search?keyword=' + child.product_id
              "
            >
              <li class="children-list-item">
                <img
                  class="children-item-image"
                  :src="child.image"
                  loading="lazy"
                />
                <p class="children-item-name">{{ child.name }}</p>
                <p class="children-item-describe">{{ child.describe }}</p>
                <p class="children-item-price">
                  <span> {{ child.price }}{{ child.unit1 }} </span>
                  &nbsp;<del class="children-item-delete" v-if="child.delete"
                    >{{ child.delete }} {{ child.unit2 }}</del
                  >
                </p>
              </li>
            </a>
            <a
              :href="'https://www.mi.com/shop/search?keyword=' + son.product_id"
              v-if="son"
            >
              <li class="son-list-item" v-if="Object.keys(son).length > 0">
                <div class="son-item-info">
                  <p class="son-item-name">{{ son.name }}</p>
                  <p class="son-item-price">
                    <span> {{ son.price }}{{ son.unit1 }} </span>
                  </p>
                </div>
                <img class="son-item-image" :src="son.image" />
              </li>
            </a>
            <a
              :href="
                'https://www.mi.com/shop/search?keyword=' + openMore.keyword
              "
              v-if="openMore"
            >
              <li
                class="open-more-item"
                v-if="Object.keys(openMore).length > 0"
              >
                <div class="open-more-info">
                  <p class="open-more-text">浏览更多</p>
                  <p class="open-more-category">{{ openMore.category }}</p>
                </div>
                <el-icon class="open-more-icon"><Open /></el-icon>
              </li>
            </a>
          </ul>
        </li>
      </ul>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
  import { onMounted, ref, PropType } from "vue";
  import {
    ChildrenListType,
    GoodInfoListType,
    TabLisType,
    ChildType,
    SonListType,
    SonType,
    OpenMoreType,
    EntryListType,
  } from "../../../types/Shop";
  let activeTab = ref<TabLisType["activeTab"]>("");
  let interval: ReturnType<typeof setInterval>;

  let children = ref<ChildType[]>([]);

  let son = ref<SonType>();

  let openMore = ref<OpenMoreType>();

  const props = defineProps({
    goodInfo: {
      type: Object as PropType<GoodInfoListType>,
      required: true,
    },
    childrenList: {
      type: Array<ChildrenListType>,
      required: true,
    },
    sonList: {
      type: Array<SonListType>,
      required: true,
    },
  });

  const handleMouseEnter = (tabName: TabLisType["tabName"]) => {
    activeTab.value = tabName;
    if (tabName) {
      for (const o of props.childrenList) {
        if (o.category === tabName) {
          children.value = o.children;
        }
      }

      for (const o of props.sonList) {
        if (o.category === tabName) {
          son.value = o.son;
          openMore.value = o.openMore;
        }
      }
    }
  };

  const handleMouseLeave = () => {
    clearInterval(interval);
    interval = setInterval(() => {
      activeTab.value = activeTab.value;
    }, 5000);
  };

  onMounted(() => {
    if (props.goodInfo.tabList.length > 0) {
      handleMouseEnter(props.goodInfo.tabList[0].activeTab);
    }
  });
</script>

<style lang="scss" scoped>
  @use "./../../../styles/variable.scss" as *;
  @use "./../../../styles/mixin.scss" as *;
  @include clearfix;

  .good-info-container {
    width: 1226px;
    margin-right: auto;
    margin-left: auto;
    font: $bsFont;
  }

  .good-info-entry {
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;

    & :hover {
      @include element-hover-animation;
    }
  }

  .good-info-title {
    min-height: 55px;
    line-height: 55px;
    font-size: 22px;
    font-weight: 200;
    color: $bsGray;
  }

  .good-info-image {
    width: 234px;
    height: 614px;
    object-fit: cover;
  }

  .good-info-entries {
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;

    & :hover {
      @include element-hover-animation;
    }
  }

  .good-info-entries-title {
    min-height: 55px;
    line-height: 55px;
    font-size: 22px;
    font-weight: 200;
    color: $bsGray;
  }

  .good-info-entries-image {
    margin-left: 10px;
    margin-bottom: 10px;
    width: 234px;
    height: 300px;
    object-fit: cover;
  }

  .tablist {
    display: flex;
    flex-flow: row nowrap;
    justify-content: end;
    list-style: none;
    height: 55px;
    line-height: 55px;

    .tablist-item {
      cursor: pointer;
      margin: 0 0 0 30px;
      min-width: auto;

      .tablist-item-name {
        margin: 0;
        padding: 16px 0 0;
        list-style-type: none;
        font-size: 16px;
      }
    }
  }

  .tablist-item-active {
    min-width: auto;
    height: 40px;
    color: $themeColor;
    border-bottom: 2px solid $themeColor;
  }

  .children-list {
    top: 55px;
    left: 255px;
    position: absolute;
    clear: both;
    width: 992px;
    min-height: 614px;
    margin: 0 0 -14px -14px;
    list-style: none;

    .children-list-item,
    .son-list-item,
    .open-more-item {
      float: left;
      width: 234px;
      height: 300px;
      margin: 0 0 14px 14px;
      background: $bsWhite;
      transition: all 0.2s ease;
      box-sizing: border-box;
      padding: 20px 0;
      text-align: $text-center;
      font: $bsFont;
      text-decoration: none;

      &:hover {
        @include element-animation;
      }

      .children-item-image {
        width: 160px;
        height: 160px;
        aspect-ratio: auto 160 / 160;
      }

      .children-item-name,
      .son-item-name {
        font-size: 14px;
        font-weight: 400;
        color: $bsGray;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        margin: 0 10px;
      }

      .children-item-describe {
        margin: 0 10px 10px;
        height: 18px;
        font-size: 12px;
        color: $bsDark;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }

      .children-item-price,
      .son-item-price {
        margin: 0 10px 14px;
        color: $themeColor;
      }

      .children-item-delete {
        color: $bsDark;
      }
    }

    .son-list-item,
    .open-more-item {
      display: block;
      height: 143px;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-evenly;
      align-items: center;
      padding: 10px 20px;
      text-align: left;

      .son-item-name {
        white-space: wrap;
        font-size: 14px;
        font-weight: 400;
        color: $bsGray;
      }

      .son-item-image {
        width: 80px;
        height: 80px;
        aspect-ratio: auto 80 / 80;
      }
    }

    .open-more-text {
      font-size: 18px;
      color: $bsGray;
    }

    .open-more-category {
      display: block;
      font-size: 12px;
      color: #757575;
    }

    .open-more-icon {
      font-size: 50px;
      line-height: 50px;
      color: $themeColor;
    }
  }
</style>
